// PureComponent帮助我们去处理shouldComponentUpdate
import React, { PureComponent } from "react";

class Child extends PureComponent {
  state = {
    msg: "hello",
  };

  // 父组件render -> 子组件render -> 子组件componentDidMount -> 父组件componentDidMount
  render() {
    console.log("child render");
    return (
      <div>
        child - {this.props.count} - {this.state.msg}
      </div>
    );
  }

  componentDidMount() {
    console.log("child componentDidMount");
    setTimeout(() => {
      this.setState({
        msg: "hi",
      });
    }, 2000);
  }

  // 组件将要接收props
  // 这个生命周期也是被废弃了
  // 父组件只要render了，那么子组件必然会render
  UNSAFE_componentWillReceiveProps() {
    console.log("componentWillReceiveProps");
  }

  // 组件是否要更新？
  // 可以接收两个参数
  // shouldComponentUpdate(nextProps, nextState) {
  //   console.log("shouldComponentUpdate");
  //   // console.log(nextProps.count);
  //   // console.log(this.props.count);
  //   // 必要要返回一个布尔值
  //   // return false;
  //   // if (nextProps.count === this.props.count) {
  //   //   return false;
  //   // } else {
  //   //   return true;
  //   // }
  //   return nextProps.count !== this.props.count;
  // }

  // 更新前
  UNSAFE_componentWillUpdate() {
    console.log("UNSAFE_componentWillUpdate");
  }

  // 更新后
  componentDidUpdate() {
    // 不要再这里去更新，会造成死循环
    console.log("componentDidUpdate");
  }

  // 卸载阶段
  componentWillUnmount() {
    // 再这里清除定时器，websocket,js事件监听，第三方插件
    console.log("componentWillUnmount");
  }
}

export default Child;
